<template>
  <div>
    <div style="float:left;width:85%;height: 150px;">
      <div class="article-card" @click="viewArticle(notice)"><span style="font-size: 20px"><strong>{{notice.noticeTitle}}</strong></span></div>
      <el-divider content-position="left">{{notice.pushTime|datefmt}}</el-divider>
      <div class="article-card" @click="viewArticle(notice)"><p>{{notice.noticeAbstract}}</p></div>
    </div>
    <el-image
      style="margin:18px 0 0 30px;width:100px;height: 100px"
      :src="notice.noticeCover"
      fit="cover"></el-image>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  name: 'NoticeCards',
  props: {notice: []},
  methods: {
    viewArticle (notice) {
      this.$router.push(
        {
          name: 'notice',
          params: {
            id: notice.id
          }
        }
      )
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.article-card:hover {
  color: #409EFF;
}
</style>
